<template>
  <el-dialog v-model="dialogInfo.dialogVisible" :title="dialogInfo.title" width="660" @close="cancel"
    :close-on-click-modal="false">
    <el-form v-if="dialogInfo.dialogVisible" ref="formRef" :model="formData" :rules="rules" label-width="110px">
      <el-form-item label="模具名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="模具编号" prop="no">
        <el-input v-model="formData.no"></el-input>
      </el-form-item>
      <!-- <template v-for="item in fieldList" :key="item.id">
        <el-form-item :label="item.title" :prop="item.name" :rules="item.rules" :required="item.required">
          <component :is="componentMap[item.type]" v-model="formData[item.name]" :config="item"
            :options="item.options" />
        </el-form-item>
      </template> -->
    </el-form>
    <form-render :form-schema="fieldList" :data="moldInfo" :label-width="'110px'" ref="customFormRef"></form-render>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitClick()"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
import { queryModelById, updateModel } from '@/api/model'
import { createMold } from '@/api/mold'
import { type ElForm, type FormRules, ElMessage } from 'element-plus'
import {
  CustomFileUpload,
  CustomInput,
  CustomSelect,
  CustomUserSelect,
} from '@/components/dynamic-form-field'

import formRender from '@/components/form-render/index.vue'

const emits = defineEmits(['closeCb'])

const rules = ref<FormRules>({
  name: [{ required: true, message: '请填写名称', trigger: 'blur' }],
  no: [{ required: true, message: '请填写编号', trigger: 'blur' }],
})
const ruleFormRef = useTemplateRef<InstanceType<typeof ElForm>>('formRef')

const customFormRef = useTemplateRef<InstanceType<typeof formRender>>('customFormRef')

const moldInfo = ref<any>({})

const initForm: any = {
  name: '',
  no: '',
}
const formData = ref<any>({
  name: '',
  no: '',
})

const dialogInfo = ref<any>({
  title: '创建模具',
  dialogVisible: false,
  editType: 'create',
})

const fieldList = ref<any[]>([])

const getModelById = async () => {
  const res: any = await queryModelById('test_model_11')
  if (res.code === 0) {
    fieldList.value = [...res.data.fieldList]
  }
}

const submitClick = async () => {
  const isValid = await ruleFormRef.value?.validate()
  const customFormData = await customFormRef.value?.getCustomFormData()
  if (isValid && customFormData) {
    const obj = { ...formData.value, ...customFormData }
    if (dialogInfo.value.editType === 'edit') {
      obj.id = moldInfo.value.id
      const res: any = await updateModel(obj)
      if (res.code === 0) {
        ElMessage({
          message: '编辑成功',
          type: 'success',
        })
        dialogInfo.value.dialogVisible = false
      }
    } else {
      const res: any = await createMold(obj)
      if (res.code === 0) {
        ElMessage({
          message: '创建成功',
          type: 'success',
        })
        dialogInfo.value.dialogVisible = false
      }
    }


  }
}
const cancel = () => {
  formData.value = { ...initForm }
  dialogInfo.value.dialogVisible = false
  emits('closeCb')
}




const openDialog = async (editType: string, data?: any) => {
  moldInfo.value = { ...data }
  editType === 'create'
    ? (dialogInfo.value.title = '创建模具')
    : (dialogInfo.value.title = '编辑模具')
  dialogInfo.value.dialogVisible = true
  dialogInfo.value.editType = editType
  await getModelById()
  if (editType === 'edit') {
    for (let i in formData.value) {
      formData.value[i] = data[i]
    }
  }
}
defineExpose({ openDialog })
</script>
<style scoped></style>
